<template>
	<view>
		<TopHead :title="'发表评价'"></TopHead>
		<view class="conbox">
			<view class="box1">
				<image class="goods-images" :src="path+logo"></image>
				<view class="title1">{{productEntityName}}</view>
				<view class="title2">
					描述相符：
					<view class="pl-item" @click="xuanze(item.id)" :class="cixid==item.id?'active':''"
						v-for="(item,index) in plkk" :key="index">
						<image v-if="cixid==item.id" :src="item.icon2"></image>
						<image v-else :src="item.icon"></image>

						<text>{{item.title}}</text>
					</view>
				</view>
				<view class="title3">
					<view></view>
					<view>客观真实评价能帮助用户做出决策</view>
					<view></view>
				</view>
				<view class="uni-textarea">
					<textarea class="textarea" v-model="info" placeholder-style="color:#c2c2c2"
						placeholder="宝贝看起来不错，给小伙伴们分享下优点吧" />
				</view>
				<view class="title4">
					<uni-file-picker :limit="9" v-model="imageValue" fileMediatype="image" mode="grid"
						@select="uploadFile" @progress="progress" @success="success" @delete="handleFileDelete"
						@fail="fail" image-styles="width: 192rpx;height: 144rpx;" width="192rpx" height="144rpx" />
				</view>
				<!-- <view class="title5">
					<label @click="checkedChange">
						<checkbox value="cb" color="#e47917" :checked="checkbox1" style="transform: scale(.7);" />匿名评价
					</label>
				</view> -->
			</view>
			<view class="box1 box2">
				<view class="box2-title">您对商品总体满意度</view>
				<view class="box2-title2">
					<text>商品服务</text>
					<uni-rate class="rate-box" style="transform: scale(.9);" v-model="rateValue1" @change="onChange1"
						activeColor="#e47917" />
				</view>
				<view class="box2-title2">
					<text>物流服务</text>
					<uni-rate class="rate-box" style="transform: scale(.9);" v-model="rateValue2" @change="onChange2"
						activeColor="#e47917" />
				</view>
				<view class="box2-title2">
					<text>其它服务</text>
					<uni-rate class="rate-box" style="transform: scale(.9);" v-model="rateValue3" @change="onChange3"
						activeColor="#e47917" />
				</view>
			</view>
			<view class="submitBtn" @click="submit()">发表</view>
		</view>
	</view>
</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue';
	export default {
		components: {
			TopHead
		},
		data() {
			return {
				path: this.$http.tpUrl + '/', // 图片前缀
				plkk: [{
						title: '好评',
						id: 3,
						icon: '/static/images/good-1.png',
						icon2: '/static/images/good-1-active.png'
					},
					{
						title: '中评',
						id: 2,
						icon: '/static/images/good-2.png',
						icon2: '/static/images/good-2-active.png'
					},
					{
						title: '差评',
						id: 1,
						icon: '/static/images/good-3.png',
						icon2: '/static/images/good-3-active.png'
					},
				],
				cixid: 3,
				checkbox1: false, // 
				rateValue1: 5, // 
				rateValue2: 5, // 
				rateValue3: 5, // 
				orderId: '',
				logo: "",
				productEntityName: "", // 商品名
				ProductEntityId: '', // 商品id
				info: '', // 内容 
				listFiles: [], // 图片
			}
		},
		onLoad(options) {
			console.log(options)
			this.logo = options.logo
			this.orderId = options.orderId
			this.productEntityName = options.productEntityName
			this.productEntityId = options.productEntityId || ''
		},
		onShow() {


		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			// if (this.total > this.list.length) {
			// 	this.page = parseInt(this.page) + 1
			// }
		},
		methods: {
			// 提交评价
			submit() {
				let _this = this;
				let data = {

					"evaluate": this.cixid, // 好评 中评 差评
					"info": _this.info, // 内容
					"productService": _this.rateValue1, // 商品服务
					"logisticsService": _this.rateValue2, // 物流服务
					"otherService": _this.rateValue3, // 其他服务
					"photolist": _this.listFiles, // 图片
					"productEntityId": _this.productEntityId, // 商品id

					"userId": uni.getStorageSync('id'), // 用户
					"orderId": _this.orderId, // 订单Id


				}
				console.log(data)
				if (data.info == "" || data.info == null || data.info == undefined) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					});
					return false
				}
				// return
				_this.$http.fetchData({
					url: '/wechatApplet/customer/evaluate/',
					method: 'POST',
					data: data,
					success(res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						setTimeout(()=>{
							uni.navigateBack()
						},1000)

					}
				})
			},
			//  
			xuanze(id) {
				this.cixid = id
			},
			//上传
			uploadFile(e) {
				let that = this;
				console.log(e)
				console.log(e.tempFilePaths)
				let files = e.tempFilePaths
				// let token = uni.getStorageSync('token')
				// return
				// let header = {
				// 	'Authorization': `Bearer ${token}`,
				// 	// 'Content-Type': "application/json"
				// }
				for (let i = 0; i < files.length; i++) {
					const file = files[i]

					uni.uploadFile({
						url: that.$http.baseUrl + '/common/upload/', //附件上传的服务器接口地址，
						// url: 'http://www.4008360121.com/UploadPic/Index',
						filePath: file, //要上传文件资源的路径,不同的组件
						// header: header,
						method: 'POST',
						name: 'files', //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容,即附件信息的接收字段名称
						formData: { //HTTP 请求中其他额外的 form data	

						},
						success: (res) => { //回调方法
							console.log(res)
							console.log(JSON.parse(res.data));
							let data = JSON.parse(res.data);
							// console.log(data.url)
							that.listFiles.push(data.data);
							console.log(that.listFiles)

						},
						fail(res) {
							console.log('err', res)

							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})

						},
					});
				}


			},
			// 删除
			handleFileDelete(e) {
				console.log(e)
				this.listFiles.splice(e.index, 1)
				console.log(this.listFiles)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)


			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			// 匿名
			checkedChange() {
				this.checkbox1 = !this.checkbox1
				console.log(this.checkbox1)
			},
			// 评分1
			onChange1(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				console.log(this.rateValue1);
			},
			// 评分2
			onChange2(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				console.log(this.rateValue2);
			},
			// 评分3
			onChange3(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				console.log(this.rateValue3);
			},

		}
	}
</script>

<style scoped>
	.headBox {
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #232323;
		padding-top: 88rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 112rpx;
		background: linear-gradient(89deg, #f9d7a6 1%, #ffdc95 100%);
	}

	.headBox .wzText {
		line-height: 56rpx;
	}

	.conbox {
		padding: 30rpx;
		padding-top: 240rpx;
		padding-bottom: 100rpx;
	}

	.box1 {
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93, 69, 41, 0.25);
		position: relative;
		padding-top: 104rpx;
		padding-bottom: 30rpx;
	}

	.goods-images {
		width: 156rpx;
		height: 156rpx;
		background-color: #e5e5e5;
		position: absolute;
		top: -38rpx;
		left: 50%;
		margin-left: -78rpx;
		border-radius: 20rpx;


	}

	.title1 {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: center;
		color: #5d4529;
		margin-top: 20rpx;
	}

	.title2 {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		text-align: center;
		margin-top: 50rpx;
	}

	.title2 .pl-item {
		display: inline-block;
		margin-right: 58rpx;
	}

	.title2 .pl-item image {
		width: 38rpx;
		height: 40rpx;
		display: inline-block;
		vertical-align: middle;
		margin-right: 10rpx;
	}

	.title2 .pl-item:last-child {
		margin-right: 0;
	}

	.title2 .active {
		color: #e47917;
	}

	.title3 {
		display: flex;
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
		margin-top: 35rpx;
	}

	.title3>view:nth-child(1) {
		border-bottom: 2rpx dashed #c7c7c7;
		width: 140rpx;
		height: 1rpx;
	}

	.title3>view:nth-child(3) {
		border-bottom: 2rpx dashed #c7c7c7;
		width: 140rpx;
		height: 1rpx;
	}

	.title3>view:nth-child(2) {
		flex: 1;
		text-align: center;
	}

	.uni-textarea {
		margin-top: 20rpx;
		padding: 20rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
	}

	.uni-textarea .textarea {
		height: 200rpx;
	}

	.title4 {
		padding: 20rpx;
	}

	.title5 {
		padding: 0 20rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
	}

	.box2 {
		padding: 24rpx 22rpx;
		padding-bottom: 44rpx;
		margin-top: 24rpx;
	}

	.box2-title {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
	}

	.box2-title2 {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
		margin-top: 28rpx;
	}

	.box2-title2 text {
		vertical-align: text-bottom;
	}

	.rate-box {
		display: inline-block;

	}

	.submitBtn {
		width: 590rpx;
		height: 112rpx;
		background: #e47917;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: center;
		color: #ffffff;
		line-height: 48rpx;
		line-height: 112rpx;
		margin: 0 auto;
		margin-top: 124rpx;
	}
</style>